<style lang="scss">

</style>

<template>
  <template v-if="inited">

<!--    {{state.value.data}}-->

    <el-collapse v-model="state.activeNames" >
      <el-collapse-item title="label样式" name="1">
        <z-cell-item label-width="max-content" label="隐藏标题">
          <el-radio-group v-model="state.value.data.hidden"
                          @change="setPropVal(state.value.data, 'hidden', $event)"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </z-cell-item>

        <z-cell-item label-width="max-content" label="长度">
          <unit-input v-model="state.value.data['label-width']"
                      default-unit="px"
                      @fchange="setPropVal(state.value.data, 'label-width', $event)"
          ></unit-input>
        </z-cell-item>

        <z-cell-item label-width="max-content" label="标题位置(左, 上)">
          <el-select  v-model="state.value.data['label-position']"
                      @change="setPropVal(state.value.data, 'label-position', $event)"

          >
            <el-option label="左" value="left"></el-option>
            <el-option label="上" value="top"></el-option>
          </el-select>
        </z-cell-item>
      </el-collapse-item>
    </el-collapse>



  </template>

</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import {nextTick, reactive, toRaw} from "vue";
import ZCellItem from "@/plugins/z-frame/components/ZCellItem.vue";
import UnitInput from "@/components/UnitInput.vue";

export default {
  name: 'CusLabelItem',
  components: {UnitInput, ZCellItem },
  mixins: [
    CustomRenderControlMixin
  ],
  setup(props, ctx) {

    let {part_key} = props.defs;

    function parseCachedData(obj) {
      if (!obj.data) {
        obj.data = {}
      }
      if (!obj.control) {
        obj.control = {
          propsV2: {}
        }
      }
      // delete obj.data.classObj;
      if (obj.data.attrs) {
        let props = []
        for (let [key, value] of obj.data.attrs) {
          props.push({
            name: key,
            value: value,
          })
        }
        obj.control.attrsObj = {
          props
        }
        obj.control.propsV2 = Object.fromEntries(obj.data.attrs)
      } else {

        obj.control.attrsObj = {
          props: []
        }
      }

      if (obj.data.class) {
        let props = []
        for (let value of obj.data.class) {
          props.push({
            label: value,
            value: value,
          })
        }
        obj.control.classObj  = props
        obj.control.class = obj.data.class
      }

      obj.control.stylesObj = "{cached: null, css: ''}"

      if (obj.data.styles) {
        obj.control.stylesObj = obj.data.styles
      }
    }

    let obj;
    let JSON5 = ZY.JSON5;
    let { data, methods, listeners, init, widgetConfig2, curFormCon, setModelVal } = defineCustomRender(props, ctx, {
      handleValueInit(newVal) {
        // console.log('CusUI', newVal, typeof  newVal)
        if (!newVal) {
          newVal = {
            // classObj: {},
            // attrsObj: {},
            control: {
              propsV2: {}
            },
            data: {}
          }
          return newVal
        }
        if (newVal) {
          try {
            obj = JSON5.parse(newVal)
            // console.log(obj)
            parseCachedData(obj)

            return obj
          } catch (e) {
            console.log(e)
          }
        }
        return {}
      }
    })
    let state = data({
      value: {},
      activeNames: ['1']
    })
    init(props)

    function getCachedVal() {
      let clonedValue = JSON5.parse(JSON5.stringify(state.value))
      // console.log(clonedValue)
      Reflect.deleteProperty(clonedValue, 'control')
      return clonedValue
    }

    function onChange() {
      let str = JSON5.stringify(getCachedVal())
      // console.log('onChaneg')
      methods.onChange(str)
      // curFormCon.comManager.context.sendEvent('save:form', {
      //
      // })
      // curFormCon.comManager.context.sendEvent('save:cusui', {
      //   str
      // })
    }



    function save() {
      onChange()
    }

    function onBlur() {
      // console.log('onBlur')
      onChange()
    }

    let propsState = reactive({
      props: {}
    })

    function setPropVal(props, key, e) {
      props[key] = e
      // let obj = toRaw(props)
      // state.value.data.attrs = Object.entries(obj)


      // console.log('setPropVal', obj, key, e, state.value.data.attrs );
      // curFormCon.callPageEvent('cus-ui__set-prop-val', {
      //   props: obj, key, value: obj[key]
      // }, e);
      nextTick(() => {
        onBlur()
      })
    }

    let exportCtx = {
      getExportData() {
        return getCachedVal()
      },
      importData(data) {
        setModelVal(JSON5.stringify(data))
        nextTick(() => {
          onChange()
          curFormCon.callPageEvent('cus-ui__import_data', {
            props: obj,
          }, {});
        })
      }
    }

    return {
      state,
      widgetConfig: widgetConfig2,
      onChange,
      methods,
      propsState,
      exportCtx,
      setPropVal,
      onBlur,
      save,
      listeners,
    }
  },
}
</script>

